<template>
  <van-row class="goods-manage">
    <van-nav-bar
      title="商品管理"
      right-text="历史订单"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-row class="search">
      <van-search
        v-model="state.searchData.nameLike"
        @search="searchEvent"
        @clear="searchCancel"
        placeholder="搜索"
      />
    </van-row>
    <van-row style="height: 83vh; width: 100%; overflow: scroll">
      <van-empty
        v-if="!state.goodsList.length > 0"
        style="width: 100%; text-align: center"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无数据"
      />
      <div class="health-counseling" v-else>
        <div
          v-for="item in state.goodsList"
          :key="item.id"
          style="width: 100%; margin-bottom: 10px"
        >
          <van-card desc="" :thumb="item.imgUrl">
            <template #title>
              <van-row>
                <van-col span="24" style="font-weight: bold; font-size: 14px">
                  {{ item.name }}
                </van-col>
              </van-row>
            </template>
            <template #desc>
              <p
                style="
                  color: #969799;
                  height: 38px;
                  overflow: hidden;
                  display: -webkit-box; /* 必须设置display属性为-webkit-box */
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 显示省略号 */
                  -webkit-line-clamp: 2; /* 限制显示两行 */
                  -webkit-box-orient: vertical; /* 垂直方向上的换行 */
                "
              >
                {{ item.content }}
              </p>
              <van-row align="center">
                <van-col span="12">
                  <span
                    style="font-size: 18px; font-weight: bold"
                    v-html="decimalPoint(item.price)"
                  ></span>
                </van-col>
                <van-col span="12" align="right">
                  <van-stepper
                    v-model="item.number"
                    :min="0"
                    :default-value="0"
                    @plus="stepperChange(item)"
                    @minus="stepperMinus(item)"
                  />
                </van-col>
              </van-row>
            </template>
          </van-card>
        </div>
      </div>
    </van-row>

    <van-submit-bar
      :price="state.totalAmount * 100"
      text-align="left"
      button-text="立即结算"
      button-color="#08D781"
      @submit="onSubmit"
      :disabled="state.detailsParams.length <= 0"
    />
  </van-row>
</template>
<script setup>
import { reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { decimalPoint, arrGoAgain, setStorage } from "@/utils/common";
import { goodsList, jumpToOrderPage } from "@/api/goods/goodsManage";
import { siteTitle } from "@/settings";
const router = useRouter();
const state = reactive({
  goodsList: [],
  searchData: {
    pageSize: 10,
    pageNum: 1,
    nameLike: "",
  },
  totalAmount: 0,
  detailsParams: [],
});

// 总价计算属性
state.totalAmount = computed(() => {
  let total = 0;
  state.goodsList.forEach((value) => {
    if (value.number > 0) {
      total += value.price * value.number;
    }
  });
  return total;
});

// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const onClickRight = () => {
  router.push({ name: "historicalOrders" });
};

// 提交
const onSubmit = () => {
  const params = {
    detailsParams: state.detailsParams,
    deptId: "1652255343972974592",
  };
  jumpToOrderPage(params).then((v) => {
    const data = v.data;
    setStorage(siteTitle + "_goodsList", JSON.stringify(params));
    router.push({
      name: "payment",
      query: {
        totalAmount: state.totalAmount,
      },
    });
  });
};
// 步进器
const stepperChange = (val) => {
  val.number = val.number + 1;
  state.goodsList.forEach((value) => {
    if (value.id == val.id && val.number > 0) {
      console.log(value.id, val.id, value.number);
      const data = {
        templateId: val.id,
        quantity: val.number,
      };
      state.detailsParams.unshift(data);
    }
  });
  state.detailsParams = arrGoAgain(state.detailsParams);
  console.log(state.detailsParams);
};

// 点击减号触发
const stepperMinus = (val) => {
  val.number = val.number - 1;
  console.log(val.number);
  state.detailsParams.forEach((value, index) => {
    if (value.templateId == val.id) {
      value.quantity = val.number;
      if (!val.number > 0) {
        state.detailsParams.splice(index, 1);
      }
    }
  });
};
const queryGoodsList = () => {
  goodsList(state.searchData).then((v) => {
    const data = v.data.records;
    state.goodsList = data;
  });
};
queryGoodsList();
// 搜索事件
const searchEvent = () => {
  if (state.searchData.nameLike) {
    queryGoodsList();
  }
};
// 搜索事件取消
const searchCancel = () => {
  state.searchData.nameLike = "";
  queryGoodsList();
};
</script>
<style lang="scss" scoped>
.goods-manage {
  width: 100%;
  background: #f9f9f9;
  ::v-deep .van-submit-bar__button--danger {
    background: #4bbdbe;
  }
  .health-counseling {
    margin: 0 16px;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
    button {
      padding: 0 10px;
    }
    .van-card {
      width: 100%;
      background: #fff;
      border-radius: 10px;
      ::v-deep .van-card__thumb {
        width: 80px !important;
        height: 80px;
        img {
          height: 100%;
        }
      }
      ::v-deep .van-card__content {
        text-align: left;
        min-height: inherit;
      }
    }
  }
  .van-nav-bar {
    width: 100%;
    background: transparent;

    ::v-deep .van-nav-bar__text {
      color: #4bbdbe;
    }
    ::v-deep .van-nav-bar__left {
      .van-badge__wrapper {
        color: #000;
      }
    }
  }
  .search {
    width: 100%;
    background: #fff;
    ::v-deep .van-search {
      width: 100%;
      background: transparent;
      .van-search__content {
        border-radius: 6px;
        overflow: hidden;
        input {
          outline: none;
        }
      }
    }
  }
  ::v-deep .van-submit-bar__bar {
    button {
      border-radius: 8px;
      span {
        font-size: 16px !important;
        font-weight: 0;
      }
    }
    .van-submit-bar__text {
      span {
        color: #000;
        font-size: 14px;
      }
      .van-submit-bar__price-integer {
        font-size: 18px;
      }
    }
  }
}
</style>
